<template>
  <Header :topMsg="topMsg" :flag='true'/>
  <FeaList msg="新朋友"/>
  <FeaList msg="群通知"/>
  <ul>
    <li>好友</li>
    <li>分组</li>
    <li>群聊</li>
    <li>设备</li>
    <li>通讯录</li>
    <li>订阅号</li>
  </ul>

  <div 
    class="friendList"
    v-for="item in data" :key="item.id"
  >
    <div class="profile"><img :src="item.img" alt=""></div>
    
    <div class="top">
      <i>{{item.name}}</i>
      <span class="news">{{item.inOnline}}</span>
    </div>
  </div>
  <TabBar/>
</template>

<script setup>
  import {reactive,ref} from 'vue'
  import {useStore} from 'vuex'
  import Header from '@/components/Header.vue'
  import FeaList from '../components/FeaList.vue'
  import TabBar from '../components/TabBar'

  const store = useStore()
  const data = ref([])
  data.value = store.state.friendData
  const topMsg = reactive({
    kwh: 'iconfont icon-dianliang- kwh',
    name: '联系人',
    rightIco: 'iconfont icon-tianjialianxiren jia'
  })


    
</script>

<style scoped>
ul {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  margin-bottom: 20px;
  border-top: 10px solid rgb(236, 239, 239);
}

ul li {
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

ul li:first-child {
  border-radius: 9px;
  background-color: aqua;
}

.friendList {
  display: flex;
  width: 355px;
  height: 50px;
  margin: 10px 10px 0 10px;
  /* background-color: aqua; */
}

.friendList .profile {
  width: 35px;
  height: 35px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}

.friendList .profile img {
  width: 100%;
  height: 100%;
}

.friendList .top {
  position: relative;
  display: flex;
  height: 40px;
  width: 283px;
  justify-content: space-between;
}

.friendList .top i {
  margin-top: 1px;
  font-size: 13px;
}

.friendList .top span {
  margin-top: 12px;
}

.friendList .top .news {
  position: absolute;
  top: 15px;
  left: 0;
  width: 200px;
  height: 20px;
  font-size: 12px;
}

.hh {
  width: 100%;
  height: 60px;
}
</style>